<template>
  <div>
    <span class="title">
      {{itemInfo.skuInfo.skuTitle}}
    </span>
    <br>
    <span class="image">
      <el-image :src="itemInfo.skuInfo.skuDefaultImg"></el-image>
    </span>
    <br>
    <span class="price">
      ¥{{itemInfo.skuInfo.price}}
    </span>

    <a class="btn-special1 btn-lg" @click="addCart">加入购物车</a>
    <a class="btn-special1 btn-lg" @click="getCartList">我的购物车</a>

    <el-button @click="goToPaySuccess" type="text" class="btn-lg" style="background-color: #df3033;color: white;" >立即购买</el-button>
    <el-dialog title="购物车" :visible.sync="visible" width="98%" top="5vh" append-to-body>
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
    <span v-for="(seller, sellerIndex) in cartVo" :key="seller.sellerId">
      <a href="#" @click.prevent="selectSeller(sellerIndex)">{{ seller.sellerName }}</a>
    </span>
      </div>

      <!-- 遍历商店和商品 -->
      <div v-for="(seller, sellerIndex) in cartVo" :key="seller.sellerId" class="seller-section">
        <!-- 商店标题部分 -->
        <div class="seller-header">
          <h2>{{ seller.sellerName }}</h2>
          <p class="seller-desc">商店简介或其他信息</p>
        </div>

        <!-- 遍历该商店下的商品 -->
        <div v-for="(item, itemIndex) in seller.cartItemVoList" :key="item.skuId" class="cart-item">
          <!-- 商品复选框 -->
          <el-checkbox @change="cartCheck(item)" v-model="item.checked"/>

          <!-- 商品图片 -->
          <img :src="item.skuDefaultImg" alt="商品图片" class="item-img" />

          <!-- 商品信息 -->
          <div class="item-info">
            <h3>{{ item.skuName }}</h3>
            <p>{{ item.skuAttr }}</p>

            <!-- 数量输入框 -->
            <input style="width: 60px" type="number" v-model.number="item.num" :min="1" :max="200" class="quantity-input" placeholder="1"/>

            <!-- 商品价格 -->
            <span class="price">￥{{ item.skuPrice * (item.num || 1) }}</span>
          </div>

          <!-- 删除按钮 -->
          <button @click="removeItem(sellerIndex, itemIndex)" class="remove-item-btn">删除</button>
        </div>
      </div>

      <!-- 总价 -->
      <div class="total-price">
        <h3>总价: ￥{{ totalPrice }}</h3>
      </div>

      <!-- 弹框底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="goToPaySuccess" type="text" class="btn-lg" style="background-color: #df3033;color: white;">立即购买</el-button>
        <el-button @click="visible = false">取 消</el-button>
        <!-- 批量删除按钮 -->
        <el-button @click="removeSelectedItems" type="text" class="btn-lg" style="background-color: #df3033;color: white;">批量删除</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,

import axios from 'axios'
import { listCartItem, delCartItem} from '@/api/cart/cart'
import { listItem } from '@/api/product/itemInfo'
import { cartAdd } from '@/api/product/cart'
export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {axios},
  props: {},
  data() {
    //这里存放数据"

    return {
      itemInfo:{},
      cartVo:[],
      cartRes:{},
      //购物车弹出框数据
      visible:false,
      totalPrice:0,
    };
  },

  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    async goToPaySuccess(){
      //在这里我选择了window.open(url,'_self')形式，也就是不跳转新的页面，在本页面直接跳转
      window.open("http://127.0.0.1:9209/alipay/pay?subject="+"八维手机城"+"&traceNo="+Math.floor(Math.random() * 900000) + 100000+"&totalAmount="+this.totalPrice,'_self')
    },
    addCart(){
      this.cartRes.skuId=this.itemInfo.skuInfo.skuId
      this.cartRes.num=1
      cartAdd(this.cartRes).then(res=>{
          alert("添加购物车成功")
      })
    },
    getItemList(){
      const skuId = this.$route.params && this.$route.params.skuId;
      listItem(skuId).then(res=>{
         this.itemInfo=res.data
      })
    },
    //购物车列表
    getCartList(){
      this.visible = true
      listCartItem().then(res => {
        this.cartVo = res;
      })
    },
    // 默认值
    computed: {
      totalPrice() {
        return this.cartVo.reduce((total, seller) => {
          return total + seller.cartItemVoList.reduce((sum, item) => {
            return sum + item.skuPrice * (item.num || 1); // 确保使用默认值
          }, 0);
        }, 0);
      }
    },
    // 计算总价
    computedTotalPrice() {
      return this.cartVo.reduce((total, seller) => {
        return total + seller.cartItemVoList.reduce((sum, item) => {
          if (item.checked) { // 只计算选中的商品
            return sum + item.skuPrice * (item.num || 1); // 确保使用默认值
          }
          return sum;
        }, 0);
      }, 0);
    },
    // 每次点击复选框时，更新选中状态
    cartCheck(item) {
      console.log(`商品 ${item.skuName} 选中状态: ${item.checked}`);
      // 重新计算总价
      this.updateTotalPrice();
    },

    // 更新总价
    updateTotalPrice() {
      this.totalPrice = this.computedTotalPrice();
    },

    removeItem(sellerIndex, itemIndex) {
      this.cartVo[sellerIndex].cartItemVoList.splice(itemIndex, 1);
      // 移除商品后重新计算总价
      this.updateTotalPrice();
    },

    // 选择商店
    selectSeller(sellerIndex) {
      console.log(`选择了商店 ${this.cartVo[sellerIndex].sellerName}`);
    },
    // 批量删除选中的商品
    async removeSelectedItems() {
      const selectedItems = [];

      // 收集选中的商品 ID
      this.cartVo.forEach(seller => {
        seller.cartItemVoList.forEach(item => {
          if (item.checked) {
            selectedItems.push(item.skuId);  // skuId 是商品唯一标识
          }
        });
      });

      if (selectedItems.length === 0) {
        alert("请至少选择一个商品！");
        return;
      }

      // 将 skuIds 以逗号分隔的方式拼接为一个字符串
      const skuIds = selectedItems.join(',');

      try {
        // 调用删除商品的接口，传递 skuIds 参数
        delCartItem(skuIds).then(response=>{
          if (response && response.data.success) {
            // 删除成功后，重新获取购物车数据
            this.getCartList();
            alert("批量删除成功");
          } else {
            alert("删除失败，请稍后重试");
          }
        })
      } catch (error) {
        console.error("删除请求失败", error);
        alert("删除过程中发生错误，请稍后重试");
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getItemList()
    this.totalPrice()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style>
.btn-lg {
  margin-right: 10px;
  float: left;
  margin-bottom: 5px;
}

.btn-lg {
  height: 46px;
  line-height: 46px;
  padding: 0 26px;
  font-size: 18px;
  font-family: "microsoft yahei";
}
.btn-special1 {
  background-color: #df3033;
  color: #fff;
}
.btn-special1{
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.title{
    font: 700 16px Arial, "microsoft yahei";
    color: #666;
    padding-top: 10px;
    line-height: 28px;
    margin-bottom: 5px;
}
.price{
    color: #e4393c;
  font-size: 22px;
}

/* 面包屑样式 */
.breadcrumb {
  margin-bottom: 10px;
  font-size: 14px;
  color: #555;
}

.breadcrumb a {
  color: #007bff;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* 商店区块 */
.seller-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.seller-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eee;
}

.seller-header h2 {
  font-size: 18px;
  color: #333;
}

.seller-header .seller-desc {
  font-size: 14px;
  color: #777;
}

/* 商品区块 */
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 5px;
}

.cart-item .item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 15px;
}

.cart-item .item-info {
  flex-grow: 1;
}

.cart-item .item-info h3 {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.cart-item .item-info p {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.cart-item .quantity-input {
  width: 60px;
  margin-right: 15px;
}

.cart-item .price {
  font-size: 16px;
  color: #df3033;
  font-weight: bold;
}

.cart-item .remove-item-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.cart-item .remove-item-btn:hover {
  background-color: #e53935;
}

/* 总价样式 */
.total-price {
  text-align: right;
  font-size: 20px;
  font-weight: bold;
  color: #df3033;
  margin-top: 20px;
  border-top: 2px solid #eee;
  padding-top: 10px;
}

/* 弹框底部按钮样式 */
.dialog-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.dialog-footer .el-button {
  width: 45%;
  height: 45px;
}

.dialog-footer .btn-lg {
  font-size: 16px;
  font-weight: bold;
  background-color: #df3033;
  color: white;
}
</style>
